前端面试（知识点）整理（一）

一、页面布局

1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

解决方案一：使用浮动布局`

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box>div{
        height: 100px;
    }
    .box .left{
        background-color: red;
        width: 300px;
        float: left;
    }

    .box .right{
        background-color: blue;
        width: 300px;
        float: right;
    }

    .box .center{
        text-align: center;
        line-height: 100px;
        color: #fff;
        background-color: orange;
    }
</style>
</head>
<body>

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">第一种方法：浮动</div>
</div>

</body>
</html>

`
解决方案二：使用绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .box>div{
            height: 100px;
            position: absolute;
        }

        .box .left{
            background-color: red;
            width: 300px;
            left: 0;
        }

        .box .right{
            background-color: blue;
            width: 300px;
            right: 0;
        }

        .box .center{
            text-align: center;
            line-height: 100px;
            color: #fff;
            background-color: orange;
            left: 300px;
            right: 300px;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="left"></div>
        <div class="center">第二种方法：定位</div>
        <div class="right"></div>
    </div>

</body>
</html>
//abosulute属性的元素有包裹性  如果不设置宽高的话  自适应元素内部的内容 这里用left  和right值的设置来自适应外部元素

解决方案三：使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .box{
            display: flex;
        }

        .box>div{
            height: 100px;
        }

        .box .left{
            background-color: red;
            width: 300px;
        }

        .box .right{
            background-color: blue;
            width: 300px;
        }

        .box .center{
            text-align: center;
            line-height: 100px;
            color: #fff;
            background-color: orange;
            
            flex: 1;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="left"></div>
        <div class="center">第三种方法：flexbox布局</div>
        <div class="right"></div>
    </div>

</body>
</html>

方案四、表格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .box{
            display: table;
            width: 100%;
            height: 100px;
        }

        .box>div{
            display: table-cell;
        }

        .box .left{
            background-color: red;
            width: 300px;
        }

        .box .right{
            background-color: blue;
            width: 300px;
        }

        .box .center{
            text-align: center;
            line-height: 100px;
            color: #fff;
            background-color: orange;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="left"></div>
        <div class="center">第四种方法：表格布局</div>
        <div class="right"></div>
    </div>

</body>
</html>

方案五：grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .box{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }

        .box .left{
            background-color: red;
        }

        .box .right{
            background-color: blue;
        }

        .box .center{
            text-align: center;
            line-height: 100px;
            color: #fff;
            background-color: orange;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="left"></div>
        <div class="center">第五种方法：网格布局</div>
        <div class="right"></div>
    </div>

</body>
</html>

拓展1：这几种布局的优缺点？兼容性怎么样？如果高度不设置的话，哪个不能适用？
拓展2：两栏布局怎么实现？
小总结：就像解决数学题一样，如果没有已知条件的话，那么情况有很多种很多种可能，已知条件越多，那么是什么样的情况就被限定范围了，反而更好地解决。有时候已知条件太少，还要假设已知条件呢。嘿嘿嘿

二、盒子模型

1.如何理解盒子模型（基本概念）？

文档中每个元素都会被描述为一个矩形盒子，盒子有一个边界，分别为margin edge，border edge，padding-edge，content edge。
盒子模型分为标准盒子模型和IE盒子模型（微软没有遵从W3C标准）

2.标准模型和IE模型的区别？

这两者的关键差别就在于：W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含填充（padding）和边框（border）;IE盒子模型——属性高（height）和属性宽（width）这两个值包含填充（padding）和边框（border）。

3.css如何设置这两个模型？(相关知识)

（1）“标准模式”下各个浏览器是没有区别的，以宽度为例：总宽度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C标准盒子模型）。页面在“怪异模式”下，css中为元素的width和height设置的值在标准浏览器和ie系列(ie9除外)里的代表的含义是不同的（IE盒子模型）。也就是说在‘怪异模式’下ie浏览器使用的是I盒子模型。
（2）标准模式和怪异模式的来由？
在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。
（3）浏览器如何确定使用哪种渲染模式
知道了这两种渲染模式的来由，那剩下的问题就是浏览器如何能够确定应该使用哪种模式了。其实归根结底就是，浏览器如何能将旧网页与新网页区分开来。
平常编写网页的时候，一般都会见到HTML文档的头部会有文档类型声明：DOCTYPE。当浏览器遇到正确的文档声明时，浏览器就会启动标准模式，按照制定的文档类型标准解析和渲染文档。而对于旧有的网页，由于网页编写的当时标准还没有确定，所以一般是不会有文档类型声明的。所以，对于没有文档类型声明或者文档类型声明不正确的文档，浏览器就会认为它是一个旧的HTML文档，就会使用怪异模式解析和渲染该文档。关于DOCTYPE的更详细说明，请戳这里 DOCTYPE声明作用及用法详解。
（4）如何兼容IE模型
前提是页面处于“怪异模式”，“标准模式”不存在兼容性问题。
1）hack
假设内容的宽度必须固定为100px。

#box {  
width:100px !important; // ie9,ff,chrome,opera这样的标准浏览器
width:160px; //所有的浏览器；它的本意是只对不认识!important的设置。可是ie7、ie8也认识
+width:160px!important;//ie7
width:160px/0!important;//ie8
padding:0 10px;border:20px solid blue;margin:70px;  
}

2）wrapper

#box {  
width:100px;  
margin:70px;  
float:left;  
}  
.wrapper {  
padding:0 10px;border:20px solid blue;  
}

（5）Css3对盒子模型的设置
box-sizing：content-box和border-box

4.垂直外边距合并

5.BFC

三、DOM和DOM事件

1.DOM概念

DOM 全称是 Document Object Model，也就是文档对象模型。DOM 就是针对 HTML 和 XML 提供的一个API。什么意思？就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。DOM 有什么用？就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了：document.title = 'how to make love';
这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

2.BOM概念

BOM是 Browser Object Model，浏览器对象模型。刚才说过 DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要location.href = "http://www.xxxx.com";
这个 location 就是 BOM 里的一个对象。windowwindow 也是 BOM 的一个对象，除去编程意义上的“兜底对象”之外，通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口：window.close();
总结一下题主的问题：DOM 是为了操作文档出现的 API，document 是其的一个对象；BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

3.DOM有哪些方法和属性？

常用的DOM方法:

getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()

常用的DOM属性

innerHTML  节点(元素)的文本值
parentNode  节点(元素)的父节点
childNodes 
attributes   节点(元素)的属性节点

3.DOM事件基本概念（级别）

javascript操作CSS称为脚本化CSS，而javascript与HTML的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。
（1）　DOM0级事件模型是早期的事件模型，所有的浏览器都是支持的，而且其实现也是比较简单。代码如下：

<p id = 'click'>click me</p>
<script>

document.getElementById('click').onclick = function(event){
    alert(event.target);
}

</script>

　　这种事件模型就是直接在dom对象上注册事件名称，这段代码就是在p标签上注册了一个onclick事件，在这个事件函数内部输出点击的目标。而解除事件则更加简单，就是将null复制给事件函数，如下：

document.getElementById('click'_).onclick = null;

　　由此我们可以知道dom0中，一个dom对象只能注册一个同类型的函数，因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。
复制代码

var click = document.getElementById('click');
click.onclick = function(){

alert('you click the first function');

};
click.onclick = function(){

alert('you click the second function')

}
　　在这段代码中，我们为dom对象注册了两个onclick函数，但是结果是只执行了第二个注册的函数，前面所注册的函数被覆盖了。
（2）　在DOM2级中使用addEventListener和removeEventListener来注册和解除事件（IE8及之前版本不支持）。这种函数较之之前的方法好处是一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。
（3）DOM3是一些新的事件, 区别DOM3和DOM2的方法我感觉是DOM3事件有分大小写的,DOM2没有;
2.dom事件模型
DOM事件模型分为两类：一类是IE所使用的冒泡型事件（Bubbling）；另一类是DOM标准定义的冒泡型与捕获型（Capture）的事件。除IE外的其他浏览器都支持标准的DOM事件处理模型。
3.dom事件流
DOM的结构是一个树形，每当HTML元素产生事件时，该事件就会在树的根节点和元素节点之间传播，所有经过的节点都会收到该事件。
DOM2级事件模型中规定了事件流的三个阶段：捕获阶段、目标阶段、冒泡阶段，低版本IE（IE8及以下版本）不支持捕获阶段
4.dom事件捕获的具体流程
详见：http://www.cnblogs.com/bfgis/...
http://blog.sina.com.cn/s/blo...
5.event对象的常见应用
http://ghmagical.com/article/...
6.自定义事件
一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事件，比如click，mouseover，load等等，有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。
http://www.cnblogs.com/lvdaba...
补充：
这个时候我们可以使用IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。

ie下的例子：

//document上绑定自定义事件ondataavailable

document.attachEvent('ondataavailable', function (event) {
    alert(event.eventType);
});
var obj=document.getElementById("obj");
//obj元素上绑定click事件
obj.attachEvent('onclick', function (event) {
alert(event.eventType);
});
//调用document对象的createEventObject方法得到一个event的对象实例。
var event = document.createEventObject();
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.fireEvent('ondataavailable', event);
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
    obj.fireEvent('onclick', event);
};

高级浏览器（chrome,firefox等）的例子：


//document上绑定自定义事件ondataavailable
document.addEventListener('ondataavailable', function (event) {
    alert(event.eventType);
}, false);
var obj = document.getElementById("obj");
//obj元素上绑定click事件
obj.addEventListener('click', function (event) {
    alert(event.eventType);
}, false);
//调用document对象的 createEvent 方法得到一个event的对象实例。
var event = document.createEvent('HTMLEvents');
// initEvent接受3个参数：
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
event.initEvent("ondataavailable", true, true);
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent('HTMLEvents');
event1.initEvent("click", true, true);
event1.eventType = 'message';
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
    obj.dispatchEvent(event1);
};

7.事件的委托（代理 Delegated Events）的原理以及优缺点。
委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，
优点是：
（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒。
（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
缺点是：
事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。
8.手写原生js实现事件代理，并要求兼容浏览器。

function delegateEvent(interfaceEle, selector, type, fn) {
    if(interfaceEle.addEventListener){
    interfaceEle.addEventListener(type, eventfn);
    }else{
    interfaceEle.attachEvent("on"+type, eventfn);
    }
     
    function eventfn(e){
    var e = e || window.event;    
    var target = e.target || e.srcElement;
    if (matchSelector(target, selector)) {
            if(fn) {
                fn.call(target, e);
            }
        }
    }
}

/**
 * only support #id, tagName, .className
 * and it's simple single, no combination
 */
function matchSelector(ele, selector) {
    // if use id
    if (selector.charAt(0) === "#") {
        return ele.id === selector.slice(1);
    }
    // if use class
    if (selector.charAt(0) === ".") {
        return (" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1;
    }
    // if use tagName
    return ele.tagName.toLowerCase() === selector.toLowerCase();
}
//调用
var odiv = document.getElementById("oDiv");
delegateEvent(odiv,"a","click",function(){
    alert("1");

前端面试（知识点）整理（一）

一、页面布局

1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

二、盒子模型

1.如何理解盒子模型（基本概念）？

2.标准模型和IE模型的区别？

3.css如何设置这两个模型？(相关知识)

4.垂直外边距合并

5.BFC

三、DOM和DOM事件

1.DOM概念

2.BOM概念

3.DOM有哪些方法和属性？

3.DOM事件基本概念（级别）

myjeajea

引用和评论

如何实现一个楼中楼的评论系统

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

前端面试（知识点）整理（一）

一、页面布局

1.问题：假设高度已知，请写出三栏布局 ，其中左栏、右栏宽度各为300px，中间自适应。

二、盒子模型

1.如何理解盒子模型（基本概念）？

2.标准模型和IE模型的区别？

3.css如何设置这两个模型？(相关知识)

4.垂直外边距合并

5.BFC

三、DOM和DOM事件

1.DOM概念

2.BOM概念

3.DOM有哪些方法和属性？

3.DOM事件基本概念（级别）

myjeajea

引用和评论

如何实现一个楼中楼的评论系统

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。